<template>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="sum++">点击+1</button>

    <p style="text-align: left;border-top: 1px solid #000;">
        vue2 中是以配置项的形式来调用生命周期钩子；
        <br>
        vue3 中是以组合式API的形式来调用生命周期钩子；
    </p>
</template>

<script lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
    name: 'lifeDemo_for_vue3Life',
    setup() {

        // 数据（响应式）
        let sum = ref(0)

        // 通过组合式 API 的形式使用生命周期钩子
        onBeforeMount(() => {
            console.log('---onBeforeMount---');

        })
        onMounted(() => {
            console.log('---onMounted---');

        })
        onBeforeUpdate(() => {
            console.log('---onBeforeUpdate---');

        })
        onUpdated(() => {
            console.log('---onUpdated---');

        })
        onBeforeUnmount(() => {
            console.log('---onBeforeUnmount---');

        })
        onUnmounted(() => {
            console.log('---onUnmounted---');

        })

        return {
            sum,

        }
    },


    // #region
    // Vue2 中的写法：
    // beforeCreate(){
    //     console.log('---beforeCreate--');

    // },
    // created(){
    //     console.log('---created--');

    // },
    // beforeMount(){
    //     console.log('---beforeMount--');

    // },
    // mounted(){
    //     console.log('---mounted--');

    // },
    // beforeUpdate(){
    //     console.log('---beforeUpdate--');

    // },
    // updated(){
    //     console.log('---updated--');

    // },
    // beforeUnmount(){
    //     console.log('---beforeUnmount--');

    // },
    // unmounted(){
    //     console.log('---unmounted--');

    // }
    // #endregion


} 
</script>
<style></style>